<template>
   <div class="mainDiv">
     <el-container class="main_container">
       <el-main v-loading="loading">
         <el-form ref="form" :model="form" :rules="rules" label-width="120px">
           <el-card>
             <div slot="header" class="clearfix">
                 <span>移交登记</span>
             </div>
             <el-row :gutter="15">
               <el-col :span="12">
                 <el-form-item label="编号" prop="pno">
                   <el-input v-model="form.pno" placeholder="请输入物品编号"/>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="名称" prop="name">
                   <el-input v-model="form.name" placeholder="请输入物品名称"/>
                 </el-form-item>
               </el-col>
             </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="所属单位" prop="deptId">
                  <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择单位"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="保管单位" prop="transferDept">
                  <treeselect v-model="form.transferDept" :options="deptOptions" :show-count="true" placeholder="请选择单位"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="扣押单位" prop="officeId">
                  <treeselect v-model="form.officeId" :options="deptOptions" :show-count="true" placeholder="请选择单位"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="登记时间" prop="registerTime">
                  <el-date-picker clearable  v-model="form.registerTime" type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择登记时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="存放仓库" prop="storeId">
                  <treeselect v-model="form.storeId" :options="storeOptions" :show-count="true" placeholder="请选择仓库"/>
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="移交类型" prop="type">
                  <el-radio-group v-model="form.type">
                    <el-radio v-for="dict in dict.type.oms_staging_type" :key="dict.value" :label="dict.value">
                      {{dict.label}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="数量" prop="nums">
                  <el-input v-model="form.nums" placeholder="请输入物品数量"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="接收数量" prop="receiveNums">
                  <el-input v-model="form.receiveNums" placeholder="接收数量">
                    <el-select slot="append" v-model="form.unit" placeholder="单位" filterable allow-create clearable style="width: 80px;">
                      <el-option v-for="dict in dict.type.oms_property_unit" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-input>
                </el-form-item>
              </el-col>
             <!-- <el-col :span="12">
                <el-form-item label="办案民警" prop="registerer">
                  <el-input v-model="form.registerer" placeholder="请输入登记人"/>
                </el-form-item>
              </el-col> -->
            </el-row>
            <!-- <el-row :gutter="15">
              <el-col>
                <el-form-item label="移交说明" prop="remark">
                  <el-input type="textarea" v-model="form.remark" placeholder="请输入移交说明" />
                </el-form-item>
              </el-col>
            </el-row> -->
            <el-row :gutter="20" v-if="form.type == '1'">
                <el-col :span="6">
                  <el-form-item label="调用时间" prop="transferTime">
                    <el-date-picker clearable v-model="form.transferTime" type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择调用时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15" v-if="form.type == '1'">
              <el-col>
                <el-form-item label="调用原因" prop="transferRemark">
                  <el-input type="textarea" v-model="form.transferRemark" placeholder="请输入调用原因" style="width: 1470px;" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="15">
              <el-col :span="16">
                <el-form-item label="分类">
                  <el-row>
                    <el-col style="display: flex;">
                     <div class="mr10">
                       <el-select v-model="form.classifyId" placeholder="请选择一级分类" clearable>
                         <el-option
                           v-for="item in classifyFirst"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id"
                         />
                       </el-select>
                     </div>

                     <div class="mr10" v-if="form.classifyId">
                       <el-select v-model="form.secondClassifyId" placeholder="请选择二级分类" clearable>
                         <el-option
                           v-for="item in classifySecond"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id"
                         />
                       </el-select>
                     </div>
                     <div class="mr10" v-if="form.classifyId && form.secondClassifyId">
                       <el-select v-model="form.thirdClassifyId" placeholder="请选择三级分类" clearable>
                         <el-option
                           v-for="item in classifyThird"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id"
                         />
                       </el-select>
                     </div>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="物品特征">
                  <el-input  type="textarea" placeholder="请输入物品特征" v-model="form.feature"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="附件" prop="oss">
                  <image-upload v-model="form.oss"></image-upload>
                </el-form-item>
              </el-col>
            </el-row>
           </el-card>
         </el-form>
       </el-main>
       <el-footer>
         <div class="footerDivClass">
           <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
           <el-button @click="close()">取 消</el-button>
         </div>
       </el-footer>
     </el-container>
   </div>
</template>

<script>
import {
  initBean,
  listStaging,
  getStaging,
  delStaging,
  addStaging,
  updateStaging, getStagingByNo
} from "@/api/oms/staging";
  import { treeselect } from "@/api/system/dept";
  import { storeTreeselect,} from "@/api/wms/store";
  import { listClassify} from "@/api/oms/classify";
  import { contacts } from "@/api/oms/contacts";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "StagingAdd",
    dicts: ['oms_staging_type','oms_property_unit'],
    components: { Treeselect },
    created() {
      const id = this.$router.currentRoute.params.pno;
      if(null != id && "" != id && undefined != id){
        this.getInfo(id);
      }else{
        this.getInitBean();
      }
      this.getTreeselect();
      this.getStoreTreeselect();
      this.getFirstClassify(null,0);
    },

    data(){
      return{
        form:{},
        transferForm:{},
        transferRules:{},
        title:'',
        loading:false,
        // 按钮loading
        buttonLoading: false,
        open:false,
        rules:{
          deptId: [{
            required: true,
            message: "民警单位不能为空",
            trigger: "blur"
          }],
          transferDept: [{
            required: true,
            message: "保管单位不能为空",
            trigger: "blur"
          }],
          officeId: [{
            required: true,
            message: "扣押单位不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "移交类型不能为空",
            trigger: "blur"
          }],
          registerer: [{
            required: true,
            message: "登记人不能为空",
            trigger: "blur"
          }],
          registerTime: [{
            required: true,
            message: "登记时间不能为空",
            trigger: "blur"
          }],
          storeId: [{
            required: true,
            message: "登记仓库不能为空",
            trigger: "blur"
          }],
          transferTime: [{
            required: true,
            message: "调用时间不能为空",
            trigger: "blur"
          }],
          pno: [{
            required: true,
            message: "编号不能为空",
            trigger: "blur"
          }],
          name: [{
            required: true,
            message: "名称不能为空",
            trigger: "blur"
          }],
          nums: [{
            required: true,
            message: "数量不能为空",
            trigger: "blur"
          }],
          receiveNums: [{
            required: true,
            message: "接收数量不能为空",
            trigger: "blur"
          }],
        },
        //部门数据
        deptOptions:[],
        //仓库数据
        storeOptions:[],

        //财物分类级联
        classifyFirst:[],
        classifySecond:[],
        classifyThird:[]
      }
    },
    watch:{
      'form.classifyId': {
        handler(newVal, oldVal) {
          this.getSecondClassify(newVal,1)
        },
        deep: true,
        immediate: true
      },
      'form.secondClassifyId': {
        handler(newVal, oldVal) {
          this.getThirdClassify(newVal,2)
        },
        deep: true,
        immediate: true
      }
    },
    methods:{
      //初始化
      getInitBean(){
        this.loading=true;
        this.reset();
        initBean().then(response=>{
          this.form = response.data;
          this.loading=false;
        })
      },
      //获取详情
      getInfo(id){
        this.loading=true;
        let _this = this;
        getStaging(id).then(response=>{
          this.form = response.data;
          if(this.form.oss && this.form.oss.length > 0){
            this.form.oss.forEach(function(item){
              item.url = _this.getPictureHost()+item.fileName;
            });
          }
          if(this.form.classifyId){
            this.getSecondClassify(this.form.classifyId,1)
          }
          if(this.form.secondClassifyId){
            this.getThirdClassify(this.form.secondClassifyId,2)
          }
          this.loading=false;
        })
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      /** 查询分类下拉树结构 */
      getStoreTreeselect() {
        storeTreeselect().then(response => {
          this.storeOptions = response.data;
        });
      },
      /** 查询分类下拉树结构 */

      getFirstClassify(parentId,level){
        listClassify({'level':level,'parentId':parentId}).then(response=>{
          this.classifyFirst = response.data;
        })
      },
      getSecondClassify(parentId,level){
        listClassify({'level':level,'parentId':parentId}).then(response=>{
          this.classifySecond = response.data;
        })
      },
      getThirdClassify(parentId,level){
        listClassify({'level':level,'parentId':parentId}).then(response=>{
          this.classifyThird = response.data;
        })
      },


      close(){
        const obj = {
          path: "/oms/staging",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
      cancel() {
        this.open = false;
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          deptId: undefined,
          type: undefined,
          registerTime: undefined,
          registerer: undefined,
          storeId: undefined,
          remark: undefined,
          pics: undefined,
          status: undefined,
          transferTime: undefined,
          transferRemark: undefined,
          returnTime: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          delFlag: undefined,
          dtls: [],
          oss:[]
        };
        this.resetForm("form");
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateStaging(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.close();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              this.form.action = 'add'
              addStaging(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.close();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
    }
  }
</script>

<style>

</style>
